import React, { Component } from 'react';
import { Button, Row, Form, Col, Alert, Divider } from 'antd';
import '@/assets/css/settings';
import * as ProcessQualityControl from '../../../axios/ProcessQualityControl'// ProcessQualityControl
import { BasicLayout, BasicLayoutSearch } from '../../../components/BasicLayout';
import { BasicPagination, isInvalidObject, TableCustomize, openSuccessModal, openModalMessage, compareDate, compareString } from '../../../components/TableCustomize'
import { withPermission } from '../../../components/withpermission';
import { ReportList, ErrorList, ResultList } from '../../../utils/global'
import SearchForm from './SearchForm';
import { withRouter } from 'react-router';
const CreateButton = withPermission(Button, 'create')

class ReservationOverview extends Component {
  state = {
    loading: false,
    dataSource: [],
    searchItem: {
      // department: localStorage.getItem('workShop')
    },
    advanced: false,
    formData: {},
    pageSize: 10,
    pageNum: 1,
    total: 0,
    columns: [
      {
        title: '序号',
        dataIndex: 'dataIndex',
        width: 50,
        align: 'center',
        render: (text, record, index) => <span>{(this.state.pageNum - 1) * (this.state.pageSize) + index + 1}</span>
      },

      {
        title: '生产批号',
        width: 120,
        // allowEllipsis: true,
        ellipsis: true,
        dataIndex: 'batchNo',
        sorter: (a, b) => compareString(a.batchNo, b.batchNo)
      },
      {
        title: '产品机型',
        width: 130,
        // allowEllipsis: true,
        ellipsis: true,
        dataIndex: 'model',
        sorter: (a, b) => compareString(a.model, b.model)
      },
      {
        title: '第一交机日期',
        width: 110,
        dataIndex: 'firstDeliveryTime',
        ellipsis: true,
        sorter: (a, b) => compareDate(a.firstDeliveryTime, b.firstDeliveryTime)
      },
      {
        title: '第一出机日期',
        width: 110,
        dataIndex: 'firstOutputTime',
        ellipsis: true,
        sorter: (a, b) => compareDate(a.firstOutputTime, b.firstOutputTime)
      },
      {
        title: '车间',
        width: 100,
        dataIndex: 'department',
        ellipsis: true,
        sorter: (a, b) => compareString(a.department, b.department)
      },
      {
        title: '装配班组',
        width: 130,
        // allowEllipsis: true,
        ellipsis: true,
        dataIndex: 'groupName',
        sorter: (a, b) => compareString(a.groupName, b.groupName)
      },
      {
        title: '装配机位',
        width: 230,
        // allowEllipsis: true,
        ellipsis: true,
        dataIndex: 'seatName',
        sorter: (a, b) => compareString(a.seatName, b.seatName)
      },
      {
        title: '装配开始时间',
        width: 110,
        dataIndex: 'assembleStartTime',
        ellipsis: true,
        sorter: (a, b) => compareDate(a.assembleStartTime, b.assembleStartTime)
      },
      {
        title: '装配整体进度',
        width: 100,
        dataIndex: 'isResult',
        ellipsis: true,
        sorter: (a, b) => compareString(a.assembleProcess, b.assembleProcess),
      },
      // { dataIndex: '' }
    ],
    selectedRows: [],
    selectedRowKeys: [],
    batchNoList: [],     // 批号列表
    departmentList: [],  // 车间数据
    drawerVisible: false,
    loading_submit: false,
  };
  componentDidMount() {
    // if (this.props.location.data) {
    //   this.setState({ searchItem: this.props.location.data }, this.fetch)
    // } else {
      this.fetch()
    // }
  }
  componentWillUnmount() {
    this.setState = () => {
      return;
    };
  }
  //初始化加载数据
  fetch = (pageNum = 1, pageSize = 10) => {
    this.setState({ loading: true })
    const { searchItem } = this.state
    searchItem.pageNum = pageNum
    searchItem.pageSize = pageSize
    ProcessQualityControl.querySeat(searchItem).then(res => {
      console.log(res)
      this.setState({ loading: false })
      if (res.data.code !== 200) {
        openModalMessage('warning', res.data.msg)
        return
      }
      this.setState({ dataSource: res.data.data, total: res.data.total, pageNum, pageSize })
    }).catch(err => {
      this.setState({ loading: false })
      openModalMessage('error', err.message)
    })
  }

  handleSearch = value => {
    console.log(value)
    this.setState({ searchItem: value }, this.fetch);
  };

  onHandleAdvanced = () => {
    this.setState({ advanced: !this.state.advanced })
  }
  loadData = (value, dataSource) => {
    console.log(value, dataSource)
  }
  
  resetForm = () => {
    this.formSearch && this.formSearch.resetFields();
    this.setState({
      searchItem: {
        // department: localStorage.getItem('workShop')
      }
    }, this.fetch);
  }
  render() {
    const { drawerVisible, loading_submit, advanced, departmentList, batchNoList, loading, dataSource, columns, pageNum, pageSize, total, selectedRowKeys, downloadLoading, searchItem } = this.state;
   
    return (
      <div>
        <BasicLayoutSearch>
          <SearchForm onSearch={this.handleSearch}
            onClick={this.onHandleAdvanced}
            advanced={advanced}
            searchItem={searchItem}
            departmentList={departmentList}
            ErrorList={ErrorList}
            ReportList={ReportList}
            resetForm={this.resetForm}
            ref={node => (this.formSearch = node)}
          />
        </BasicLayoutSearch>
        <BasicLayout name="机位总览" icon="table" >
          {/* <Alert message={<div>已选择<span style={{ color: '#fd1818', margin: '0 3px' }}>{selectedRowKeys.length}</span>项</div>} type="info" showIcon style={{ marginBottom: 15 }} /> */}
          <div style={{height:600,width:'100%',overflowY:'scroll'}}>
            <Row gutter={24}>
              {dataSource&&dataSource.map(item=>
                <Col span={8} style={{marginTop:20}} onClick={()=>{this.props.history.push({ pathname: "/AssemblyProgressQuery", data: { seatName: item.name } })}}>
                  {item.status===1?<div style={{height:200,width:'100%',textAlign:'center',background:'#9af30f',paddingTop:80}}>
                    <p style={{margin:0,padding:0}}>{item.name}</p>
                    <p>{item.batchNo}</p>
                  </div>:<div style={{height:200,width:'100%',textAlign:'center',background:'rgb(174 174 174)',paddingTop:80}}>
                    <p style={{margin:0,padding:0}}>{item.name}</p>
                    <p>{item.batchNo}</p>
                  </div>}
                </Col>
              )}
            </Row>
          </div>

          {/* <TableCustomize
            columns={columns}
            rowKey={(record) => record.id}
            dataSource={dataSource}
            pagination={false}
            loading={loading}
            allowDrafting={true}
            allowRowEdit
            allowEditable={this.loadData}
            // rowSelection={rowSelection}
            // onRow={(record, rowKey) => ({
            //   onClick: this.chooseRow.bind(this, record, rowKey)
            // })}
            rowClassName={(record, index) => {
              return (['editable-row', index % 2 === 0 ? 'editable-row' : 'editable-row12'])
            }}
            scroll={{ x: 1300, y: 600 }}
          /> */}
          <BasicPagination pageNum={pageNum} pageSize={pageSize} total={total} loadData={this.fetch} />
        </BasicLayout>
      </div>
    );
  }
}
export default Form.create()(withRouter(ReservationOverview));